<template>
  <ul class="thumbnail_content">
    <li
      v-for="item in list"
      :key="item.id"
      class="cell_item"
      @click="onSelect(item)"
    >
      <img :src="filePath(item.indexFilePath)" />
      <span class="item_desc">{{ item.goodsName }}</span>
    </li>
  </ul>
</template>
<script setup>
import { defineProps, onMounted, defineEmits } from "vue";
import {
  fileServer,
} from "@/network/api.js";
const filePath = (path) =>{
  return path?fileServer + path:'';
}
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["select"]);

onMounted(() => {
  console.log(props.list);
});

const onSelect = (item) => {
  emits("select", item);
};
</script>
<style lang="scss" scoped>
.thumbnail_content {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  .cell_item {
    width: 30%;
    height: 60px;
    box-sizing: border-box;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 16px 0;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .item_desc {
      font-size: 12px;
    }
  }
}
</style>
